<template>
  <view class="page page-grey page-activity-goods" :class="{'has-fixed-footer': hasTools}">
    <view class="page-content">
      <view class="goods-list">
        <view class="goods-item" v-for="item in goodsList" :key="item.id">
          <image :src="item.imgUrl" style="width: 164rpx; height: 164rpx; border-radius: 16rpx; overflow: hidden;" mode=""></image>
          <view class="goods-item-right">
            <view class="right-title">{{item.name}}</view>
            <view class="right-list">
              <view class="right-text">
                <image src="/static/images/icon-kc.png" style="width: 22rpx; height: 22rpx;"></image>
                库存 <span class="right-number">{{item.stock}}</span><span>{{item.unit}}</span>
              </view>
              <view class="right-text">
                <image src="/static/images/iocn-dj.png" style="width: 26rpx; height: 26rpx;"></image>
                单价 <span class="right-number">{{ utils.moneyFormatter(item.price / 100)}}</span><span>元/{{item.unit}}</span>
              </view>
              <view class="right-text">
                <image src="/static/images/icon-qssl.png" style="width: 24rpx; height: 22rpx;"></image>
                起售数量 <span class="right-number">{{item.startNum}}</span><span>{{item.unit}}</span>
              </view>
            </view>
          </view>
          <view class="goods-item-tools" v-if="hasTools">
            <fui-button class="ui-btn-danger_plain" text="撤销商品" width="126rpx" height="48rpx" radius="8rpx" size="24" @click="handleToRevoke(item)"></fui-button>
          </view>
        </view>
      </view>
      <fui-empty v-show="!goodsList.length" :isFixed="true" src="/static/images/empty/data.png" title="暂无商品" size="24" color="#999"></fui-empty>
    </view>
    <view class="page-footer ui-fixed-footer ui-fixed-footer__white" v-if="hasTools">
      <fui-button text="添加商品" type="primary" height="78rpx" @click="handleAddGoods"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import utils from '@/components/firstui/fui-utils'
import activityApi from '@/api/activity/joinin'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const activityId = ref('')
const recordId = ref('')
const applyEndTime = ref(0)
const activityStatus = ref('63')
const goodsList = ref([])

const hasTools = computed(() => {
  const nowTime = new Date().getTime()
  return nowTime < applyEndTime.value && activityStatus.value != 63
})

onLoad(option => {
  activityId.value = option.activityId || ''
  recordId.value = option.recordId || ''
  applyEndTime.value = option.applyEndTime || ''
  activityStatus.value = option.activityStatus || '63'
})

onShow(() => {
  getGoodsList()
})

// 活动商品
const getGoodsList = () => {
  modal.loading('加载中...')
  try {
    activityApi.getCheckedGoodsList(recordId.value).then((res) => {
      if(res.code === 0){
        goodsList.value = (res.data || []).map((item) => {
          return {
            ...item,
            imgUrl: item.sliderPicUrls ? item.sliderPicUrls[0] : JSON.parse(item.picUrl)[0]
          }
        })
        modal.closeLoading()
      } else{
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.closeLoading()
    modal.msgError(err)
  }
}

// 撤销商品
const handleToRevoke = (row) => {
  if (goodsList.value.length <= 1) {
    modal.msg('您已报名，请至少保留一件商品参加活动！')
    return
  }
  modal.confirm(`确认撤销商品“${row.name}”？`).then(() => {
    let checkedGoodsIds = goodsList.value.map(item => item.id)
    checkedGoodsIds = checkedGoodsIds.filter(item => item != row.id)
    if (!checkedGoodsIds.length) checkedGoodsIds = ['0']
    try {
      activityApi.updateActivityGoods({
        id: recordId.value,
        productSpuIds: checkedGoodsIds.join(',')
      }).then(res => {
        if (res.code === 0) {
          modal.msg('商品已撤销！')
          getGoodsList()
        } else {
          modal.msg('撤销失败！')
        }
      })
    } catch (err) {
      modal.msg(err.msg || err || '撤销失败！')
    }
  })
}

// 添加商品
const handleAddGoods = () => {
  const checkedGoodsIds = goodsList.value.map(item => item.id)
  tab.navigateTo(`/pages/activity/joinin/selectGoods?activityId=${activityId.value}&recordId=${recordId.value}&productSpuIds=${checkedGoodsIds.join(',')}`)
}
</script>

<style lang="scss" scoped>
.page-activity-goods {
  padding: 42rpx 36rpx 186rpx;
  .page-content {
    .goods-list {
      padding-bottom: 15rpx;
      .goods-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 28rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;

        .goods-item-right {
          margin-left: 24rpx;
          width: calc(100% - 188rpx);
          .right-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 16rpx;
          }
          .right-list {
            display: flex;
            flex-wrap: wrap;
            .right-text {
              width: 100%;
              font-size: 24rpx;
              font-weight: 400;
              color: #999999;
              display: flex;
              align-items: center;
              margin-bottom: 10rpx;

              image {
                padding-right: 10rpx;
              }

              span {
                color: #333333;
              }
              .right-number {
                font-weight: bold;
                color: #2c83fc;
                padding: 0 10rpx;
              }
            }
          }
        }
        .goods-item-tools {
          flex: 0 0 100%;
          display: flex;
          justify-content: flex-end;
          margin-top: 16rpx;
        }
      }
    }
  }
  .page-footer {
    display: flex;
    align-items: center;
    height: 130rpx;
    box-shadow: 0 0 6px rgb(0 0 0 / 12%);
    padding: 0 36rpx;
    .activity-goods-count {
      flex: 1;
    }
    .fui-button__wrap {
      margin-left: 20rpx !important;
    }
  }
}
</style>